<template>
  <div style="width: 650px;height: 750px;">
    <div style="width: 320px;height: 300px">
    <dv-border-box-12>
      <dv-scroll-board :config="config3" style="width: 300px;height: 270px; margin: 0 auto;padding-top: 10px;" />
    </dv-border-box-12>
    </div>

    <div style="width: 320px;height: 300px;margin-top: -300px;margin-left: 330px">
      <dv-border-box-10>
        <!--      <div id="container" style="width: 100%;height: 100%;"></div>-->
        <!--      <div style="width:100%;height:10%;margin: 0 auto;text-align: center;color: #226BDD;font-size: 20px;">灾情分级</div>-->
        <!--      <dv-capsule-chart :config="config1" style="width:100%;height:90%" />-->
        <dv-charts :option="option" />
      </dv-border-box-10>

    </div>
    <div style="width: 650px;height: 575px;margin-top: 25px">
      <dv-border-box-10>
<!--        <div></div>-->
        <div style="width: 33%;height: 50%;float: left">
<!--          <dv-active-ring-chart :config="config2" style="width:100%;height:90%;font-size: 10px;" />-->
          <dv-capsule-chart :config="config1" style="width:100%;height:80%;padding-top: 20px;" />-->
          <div style="width:100%;height:5%;margin: 0 auto;text-align: center;color: #226BDD;font-size: 20px;">空气温度</div>
        </div>
        <div style="width: 33%;height: 50%;float: left">
          <dv-capsule-chart :config="config2" style="width:100%;height:80%;padding-top: 20px;" />-->
          <div style="width:100%;height:5%;margin: 0 auto;text-align: center;color: #226BDD;font-size: 20px;">空气湿度</div>
        </div>
        <div style="width: 33%;height: 50%;float: left">
<!--          <dv-active-ring-chart :config="config2" style="width:100%;height:90%;font-size: 10px;" />-->
          <dv-water-level-pond :config="config4" style="width:50%;height:80%;margin: 20px auto 0;" />
          <div style="width:100%;height:5%;margin: 0 auto;text-align: center;color: #226BDD;font-size: 20px;">降雨量</div>

        </div>
        <div style="width: 33%;height: 50%;float: left">
<!--          <dv-active-ring-chart :config="config2" style="width:100%;height:90%;font-size: 10px;" />-->
          <dv-charts style="margin-top: -40px;" :option="option1" />
          <div style="width:100%;height:5%;margin: -20px auto 0;text-align: center;color: #226BDD;font-size: 20px;">土壤温度</div>
        </div>
        <div style="width: 33%;height: 50%;float: left">
          <dv-charts style="margin-top: -40px;" :option="option2" />
          <div style="width:100%;height:5%;margin: -20px auto 0;text-align: center;color: #226BDD;font-size: 20px;">土壤温度</div>
        </div>
        <div style="width: 33%;height: 50%;float: left">
          <dv-active-ring-chart :config="config5" style="width:100%;height:90%;font-size: 10px;margin-top: -20px;" />
          <div style="width:100%;height:5%;margin: -10px auto 0;text-align: center;color: #226BDD;font-size: 20px;">光照</div>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
    export default {
        name: "left",

      data(){
          return{
            //空气温度
            "config1":{
              data: [
                {
                  name: '16时',
                  value: 24
                },
                {
                  name: '15时',
                  value: 26
                },
                {
                  name: '14时',
                  value: 27
                },
                {
                  name: '13时',
                  value: 27
                },
                {
                  name: '12时',
                  value: 26
                },
              ],
              unit:'℃'
            },
            //灾情分级
            "option":{
              title: {
                text: '灾情分级',
                style: {
                  fill: '#226BD5',
                }
              },
              series: [
                {
                  type: 'pie',
                  data: [
                    { name: '四级', value: 93 },
                    { name: '三级', value: 32 },
                    { name: '二级', value: 65 },
                    { name: '一级', value: 44 },
                  ],

                  insideLabel: {
                    show: true
                  },
                }

              ],

              color:['#FC0500', '#ED3700', '#F98402', '#EED800'],
            },
            //空气湿度
            "config2":{
              data: [
                {
                  name: '16时',
                  value: 55
                },
                {
                  name: '15时',
                  value: 120
                },
                {
                  name: '14时',
                  value: 78
                },
                {
                  name: '13时',
                  value: 66
                },
                {
                  name: '12时',
                  value: 80
                }
              ],
              lineWidth: 10,
              showOriginValue: true
            },
            //轮播蚜害
            "config3":{
              header: ['区域', '蚜害等级', 'SPAD'],
              data: [
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '4', '43.6'],
                ['库尔勒市', '0', '42.4'],
                ['库尔勒市', '0', '43.0'],
                ['库尔勒市', '4', '47.6'],
                ['库尔勒市', '2', '46.9'],
                ['库尔勒市', '0', '49.1'],
                ['库尔勒市', '0', '50.0'],
                ['库尔勒市', '3', '48.6'],
                ['库尔勒市', '1', '47.3'],

                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '3', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '3', '41.5'],
                ['库尔勒市', '1', '41.5'],

                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '3', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '3', '41.5'],

                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '4', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '0', '41.5'],

                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '2', '41.5'],
                ['库尔勒市', '4', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '3', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '1', '41.5'],

                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '1', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '1', '41.5'],

                ['库尔勒市', '0', '41.5'],
                ['库尔勒市', '0', '41.5']
              ],

              oddRowBGC:'#081F5D',
              evenRowBGC:'#081F5D',
            },
            //降雨量
            "config4":{
              data: [15.4],
              formatter: '{value}cm',
              waveHeight: 10,
              max: 1000
            },
            //土壤温度
            "option1":{
              // title: {
              //   text: '土壤温度'
              // },
              xAxis: {
                data: [ '11时','12时', '13时', '14时', '15时', '16时' ],
                axisLine:{
                  show: false,
                },
                axisLabel:{
                  style: {
                    fill: '#fff',
                  }
                },
              },
              yAxis: {
                data: 'value',
                max: '0%',
                axisLine:{
                  show: false,
                },
                axisLabel:{
                  show: false,
                },
                splitLine:{
                  show: false,
                }
              },
              series: [
                {
                  data: [23, 19, 21, 35, 42, 39],
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top',
                    offset: [0, 0],
                    style: {
                      fill: '#fff'
                    }
                  },
                }
              ]
            },
            //土壤湿度
            "option2":{
              // title: {
              //   text: '土壤湿度'
              // },
              xAxis: {
                data: [ '11时','12时', '13时', '14时', '15时', '16时' ],
                axisLine:{
                  show: false,
                },
                axisLabel:{
                  style: {
                    fill: '#fff',
                  }
                },
              },
              yAxis: {
                data: 'value',
                max: '0%',
                axisLine:{
                  show: false,
                },
                axisLabel:{
                  show: false,
                },
                splitLine:{
                  show: false,
                }
              },
              series: [
                {
                  data: [23, 19, 21, 35, 42, 39],
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top',
                    offset: [0, 0],
                    style: {
                      fill: '#fff'
                    }
                  },
                }
              ]
            },
            //光照
            "config5":{
              data: [
                {
                  name: '12时',
                  value: 55
                },
                {
                  name: '13时',
                  value: 120
                },
                {
                  name: '14时',
                  value: 78
                },
                {
                  name: '15时',
                  value: 66
                },
                {
                  name: '16时',
                  value: 80
                }
              ],
              lineWidth: 10,
              showOriginValue: true
            },


          }
      },
      mounted() {

      }
    }
</script>

<style scoped>

</style>
